<template>
  <div class="app-setting">
    <div class="setting-box">
      <h2 class="setting-title fontcolor">切换背景</h2>
      <div
        class="addCollect"
        @click="addBackground"
        v-if="roles == '超级管理员'"
      >
        新增收藏
      </div>
      <div class="setting-content">
        <div
          class="setting-item"
          v-for="item in backList"
          :key="item.id"
          @mouseenter.stop="changeindex(item.id)"
          @mouseleave.stop="changeindex(0)"
        >
          <img class="setting-img" :src="item.bc_url" />
          <div class="item-icon" v-if="item.id === index">
            <el-icon
              style="margin-right: 20px"
              size="24"
              color="#fff"
              @click.stop="changeBg(item)"
              ><Select
            /></el-icon>
            <el-icon
              size="24"
              color="#fff"
              @click="removeBack(item.id)"
              v-if="roles == '超级管理员'"
              ><Delete
            /></el-icon>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="pageNum"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <Dialog ref="dialog" title="新增背景" height="400px">
      <template #default>
        <el-form :rules="rules" :model="form" ref="form">
          <el-form-item label="背景名称：" prop="imgName">
            <el-input
              v-model="form.imgName"
              placeholder="请输入标题名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否上传图片：" prop="okupload">
            <el-radio-group v-model="form.okupload" class="ml-4">
              <el-radio label="1" size="large">是</el-radio>
              <el-radio label="2" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="图片地址："
            prop="imgUrl"
            v-if="form.okupload == 2"
          >
            <el-input
              v-model="form.imgUrl"
              placeholder="请输入图片地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传图片：" prop="imgUrl" v-else>
            <Upload @getFileList="getFileList"> </Upload>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitTi">确定</el-button>
      </template>
    </Dialog>
    <!-- 分页 -->
  </div>
</template>

<script>
import { getBackground, addBackground, deleteBackground, updateUserbc } from '@/api/setting'
import Dialog from '@/components/Dialog'
import Upload from '@/components/upload'
export default {
  components: {
    Dialog, Upload
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 12,
      backList: [],
      index: 0,
      roles: '',
      total: 0,
      form: {
        imgName: '',
        imgUrl: '',
        okupload: '1'
      },
      rules: {
        imgName: [
          {
            required: true,
            message: '请输入背景名称',
            trigger: 'change'
          }
        ],
        imgUrl: [
          {
            required: true,
            message: '请输入图片地址',
            trigger: 'change'
          }
        ]
      }
    }
  },
  created() {
    this.getBacklist()
    this.roles = localStorage.getItem('roles')
    console.log(this.roles);
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getBacklist()
    },
    closeDialog() {
      this.$refs.dialog.close()
    },
    getBacklist() {
      getBackground({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.backList = res.data
        this.total = res.total
      })
    },
    changeBg(item) {
      updateUserbc({ UserId: localStorage.getItem('userId'), bcId: item.id }).then(res => {
        if (res.code === 200) {
          localStorage.setItem('background', res.data.bc_url)
          this.$message({
            message: '更换成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '更换失败',
            type: 'error'
          })
        }
      })
      this.$store.commit('changeBackground', item.bc_url)
    },
    addBackground() {
      this.$refs.dialog.open()
      this.form = {
        imgName: '',
        imgUrl: '',
        okupload: '1'
      }
    },
    getFileList(val) {
      this.form.imgUrl = val[0].url
      console.log(this.imgUrl);
    },
    submitTi() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addBackground(this.form).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getBacklist()
            this.$refs.dialog.close()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    changeindex(index) {
      this.index = index
    },
    removeBack(index) {
      deleteBackground({ id: index, UserId: localStorage.getItem('userId') }).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.msg
          });
          this.getBacklist()
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.app-setting {
  position: relative;
  .setting-box {
    width: 1300px;
    height: 650px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba($color: #000000, $alpha: 0.6);
    padding: 20px;
    .setting-content {
      margin-left: 10px;
      display: grid;
      grid-template-columns: 310px 310px 310px 310px;
      grid-template-rows: 180px 180px;
      position: relative;
      .item-icon {
        width: 300px;
        height: 150px;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
      }
    }
    .setting-title {
      text-align: center;
      font-size: 20px;
      margin-bottom: 20px;
    }
    .pagination {
      position: absolute;
      bottom: 20px;
      left: 50%;
      width: 100%;
      transform: translateX(-10%);
      text-align: center;
    }
    .addCollect {
      width: 100px;
      height: 50px;
      position: absolute;
      right: 30px;
      top: 10px;
      line-height: 50px;
      background: rgb(61, 54, 54);
      text-align: center;
      border-radius: 10px;
      color: #fff;
      cursor: pointer;
    }
  }
  // 不被挤压

  .setting-item {
    width: 300px;
    height: 150px;
    // flex-shrink: 0;
    cursor: pointer;
    position: relative;
  }
  .setting-img {
    width: 300px;
    height: 150px;
    // flex-shrink: 0;
    cursor: pointer;
  }
}
</style>